<template>
    <div>
        <h1>LifeCycle</h1>
        <input type="text" ref="search"/>
        <span ref="state" :class="`myclass`+num">{{num}}</span>
        <button @click="num++">add</button>
    </div>
</template>

<script>
/**
 * 生命周期: 组件在创建 更新 销毁阶段会自动执行的一些钩子函数.
 * 1.创建create  2.渲染 mount  3.更新 update  4.销毁 unmount 【vue2 destroy】
 */
    export default {
        data(){return {
            username:"王鸿",
            num:1
        }},
        methods:{},
        computed:{},
        components:{},
        //组件实例在创建之前执行,组件选项还没有挂载到组件实例上面.
        beforeCreate(){
            //调用 组件属性 方法 都是unfined
            console.log("beforeCreate==>",this.username);
        },
        //组件实例创建完成 组件选项已经全部挂载到组件实例上面,组件实例的$el还没有挂载到视图。 无法操作组件dom
        created(){//做些数据初始化工作 或 发起ajax “componentDidMount”
            console.log("created===>",this.username,'el===>',this.$el);
        },
        //在组件开始模板渲染之前. 和 created类似
        beforeMount(){
           console.log("beforeMount",this.username,"el===>",this.$el);
        },
        //模板渲染完成 但是不能保证子组件 渲染完成,这时候可以获取dom元素.
        mounted(){
            this.$refs.search.focus();
            //在这里一般会进行一些事件绑定。轮播图开始滚动..获取dom元素.
            //不能保证子组件渲染完成
            console.log("mountd===>",this.username,"el===>",this.$el);
            this.$nextTick(()=>{
                //如果要获取子组件里面的dom可以在这里获取
            });
        },
        //在数据更新前，在dom更新前调用,一般用在数据更新前获取 旧的dom元素
        beforeUpdate(){
            let state1=this.$refs.state;// this.$refs.state获取一个dom元素 引用数据类型
            let classname1=state1.className;
            let text=state1.innerText;
            console.log("beforeUpate===>",classname1,'text==>',text,state1);
        },
        //在数据渲染完成后 一般用在数据更新后获取最新的dom元素。 它和谁 this.$nextTick
        updated(){
            //dom元素是一个对象
            let state2=this.$refs.state;
            // console.dir(state2);//打印结构
            let classname2=state2.className;
            let text2=state2.innerText;
            console.log("updated===>",classname2,text2,state2)
        },
        //组件销毁前。
        beforeUnmount(){//轮播清除定时器  绑定全局的滚动事件，做一些组件数据 或 卸载事件的清理工作.
            console.log("beforeUnmount==>",this.username,this.$refs.state);
        },
        //组件销毁后
        unmounted(){
            console.log("beforeUnmount==>",this.username,this.$refs.state);
        }
        
    }
</script>

<style lang="scss" scoped>

</style>